<template>
	<view class="">
		<view class="amend">
			<view class="content">
				<view class="box" v-if="amend == 0"><input type="text" value="" placeholder="请输入新昵称" placeholder-style="color:#cccccc;fontSize:28upx"
					 v-model="nickname" /></view>

				<view class="box phone" v-if="amend != 0&&amend != 4">{{ amend == 1 ? `原手机号码：${mobile}` : `手机号码：${mobile}` }}</view>

				<view class="box" v-if="amend == 1||amend==4">
					<input type="text" value="" placeholder="请输入新的手机号码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="newPhone"
					 maxlength="11" />
				</view>

				<view class="box code" v-if="amend == 2||amend == 3">
					<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="code" />
					<view class="" v-if="!countDown" @click="getCode">{{ codeText }}</view>
					<view class="" v-if="countDown">
						<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false" @change="changes"
						 @end="countDownEnd" bg-color="#f81149;" color="#fff"></u-count-down>
						s
					</view>
				</view>
				<view class="box code" v-if="amend == 1||amend==4">
					<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="code" />
					<view class="" v-if="!countDown" @click="getCodeNum">{{ codeText }}</view>
					<view class="" v-if="countDown">
						<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false" @change="changes"
						 @end="countDownEnd" bg-color="#f81149;" color="#fff"></u-count-down>
						s
					</view>
				</view>
				<!-- <view class="box code" >
					<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="code"/>
					<view class="code" v-if="!countDown " @click="getCode">{{codeText}}</view>
					<view class="" v-if="countDown">
						<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes='false' @change="changes"
						 @end='countDownEnd' bg-color='#5670FE' color='#fff'></u-count-down>s
					</view>
				</view> -->

				<view class="box" v-if="amend == 2"><input type="password" value="" placeholder="请重置登录密码" placeholder-style="color:#cccccc;fontSize:28upx"
					 v-model="pwd" /></view>

				<view class="box" v-if="amend == 2"><input type="password" value="" placeholder="请确认登录密码" placeholder-style="color:#cccccc;fontSize:28upx"
					 v-model="repwd" /></view>

				<view class="box" v-if="amend == 3"><input type="password" value="" placeholder="请输入交易密码" placeholder-style="color:#cccccc;fontSize:28upx"
					 v-model="payPwd" maxlength="6"/></view>

				<view class="box" v-if="amend == 3">
					<input type="password" value="" placeholder="请确认交易密码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="repayPwd" maxlength="6"/>
				</view>
			</view>
			<view class="btn" @click="amendBtn">修改</view>
		</view>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	export default {
		data() {
			return {
				amend: 1, // 0.修改手机号  1.修改登录密码  2.修改交易密码
				timestamp: 59,
				countDown: false,
				codeText: '验证码',
				code: '', //验证码
				nickname: '', //昵称
				oldPhone: '',
				newPhone: '', //新手机号
				pwd: '', //重置登录密码
				repwd: '', //确认密码
				payPwd: '', //重置交易密码
				repayPwd: '', //重置交易密码
				mobile: ''
			};
		},
		onLoad(option) {
			this.getUserInfo();
			let id = option.id;
			this.amend = id;
			// let info = this.$store.state.userInfo
			// this.oldPhone = info.mobile
			if (id == 0) {
				uni.setNavigationBarTitle({
					title: '修改昵称'
				});
			} else if (id == 1) {
				uni.setNavigationBarTitle({
					title: '修改手机号'
				});
			} else if (id == 2) {
				uni.setNavigationBarTitle({
					title: '修改登录密码'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '修改交易密码'
				});
			}
		},
		methods: {
			getUserInfo() {
				var self = this;
				self.$http.post(service.api.user.info, {}).then(function(res) {
					// console.log('1111',res);
					var list = res.data;
					self.userInfo = list;

					// self.infoList[0].content = list.nickname
					self.mobile = list.mobile;
				});
			},
			amendBtn() {
				let that = this;

				if (that.amend == 0) {
					if (!that.nickname) {
						that.$api.msg('请输入新昵称');
						return;
					}
					that.$http
						.post(service.api.user.updateInfo, {
							nickname: that.nickname
							// avatar:''
						})
						.then(res => {
							console.log('修改昵称==>>', res);
							if (res.code === 1) {
								// that.$getUserInfo()
								that.$api.msg(res.info);
								console.log(222);
								uni.navigateBack({
									delta: 1
								});
								// setTimeout(function(){
								// 	uni.navigateTo({
								// 		url:'./setting'
								// 	});
								// },500)
							}
						});
				} else if (that.amend == 1) {
					if (!that.newPhone) {
						that.$api.msg('请输入新手机');
						return;
					}
					if (!that.code) {
						console.log(that.code);
						that.$api.msg('请输入验证码');
						return;
					}

					// let data = {

					// };

					that.$http.post(service.api.user.bindMobile, {
						mobile: that.newPhone,
						verifycode: that.code
					}).then(res => {
						console.log('修改手机号====>>', res);
						if (res.code === 1) {
							that.$api.msg('修改手机号成功');
							uni.navigateBack({
								delta: 1
							});
						} else {
							that.$api.msg(res.info);
						}
					});
				} else if (that.amend == 2) {
					console.log('修改登录密码');

					if (!that.code) {
						console.log(!that.code, that.code);
						that.$api.msg('请输入验证码');
						return;
					}
					if (!that.pwd) {
						that.$api.msg('请输入新密码');
						return;
					}
					if (that.pwd != that.repwd) {
						that.$api.msg('密码输入不一致');
						return;
					}

					// let data = {
					// 	password: that.pwd,
					// 	repassword: that.repwd,
					// 	type: 1,
					// 	// mobile:that.oldPhone,
					// 	code: that.code
					// };
					that.$http.post(service.api.user.updateInfo, {
						password: that.pwd
					}).then(res => {
						console.log('修改登录密码===>>', res);
						if (res.code === 1) {
							that.$api.msg('修改成功,请重新登录');
							setTimeout(() => {
								that.$jump('/pages/login/login');
							}, 1500);
						} else {
							that.$api.msg(res.info);
						}
					});
				} else if (that.amend == 4) {
					if (!that.newPhone) {
						that.$api.msg('请输入新手机');
						return;
					}
					if (!that.code) {
						console.log(that.code);
						that.$api.msg('请输入验证码');
						return;
					}

					// let data = {

					// };

					that.$http.post(service.api.user.bindMobile, {
						mobile: that.newPhone,
						verifycode: that.code
					}).then(res => {
						console.log('修改手机号====>>', res);
						if (res.code === 1) {
							that.$api.msg('修改手机号成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500)
						} else {
							that.$api.msg(res.info);
						}
					});
				} else if (that.amend == 3) {
					if (!that.mobile) {
						that.$api.msg('请输入新手机');
						return;
					}
					if (!that.code) {
						console.log(that.code);
						that.$api.msg('请输入验证码');
						return;
					}

					// let data = {

					// };

					that.$http.post(service.api.user.apiChangePassword, {
						mobile: that.mobile,
						code: that.code,
						transaction_pw:that.payPwd
					}).then(res => {
						console.log('修改交易密码====>>', res);
						if (res.code === 1) {
							that.$api.msg('修改交易密码成功');
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 500)
						} else {
							that.$api.msg(res.info);
						}
					});
				} else {
					console.log('修改交易密码');
					if (!that.code) {
						console.log(!that.code, that.code);
						that.$api.msg('请输入验证码');
						return;
					}
					if (!that.payPwd) {
						that.$api.msg('请输入新密码');
						return;
					}
					if (that.payPwd != that.repayPwd) {
						that.$api.msg('密码输入不一致');
						return;
					}

					let data = {
						password: that.payPwd,
						repassword: that.repayPwd,
						type: 2,
						// mobile:that.oldPhone,
						code: that.code
					};
					that.$http.post(that.$api.api.my.updatePwd, data).then(res => {
						console.log('修改交易密码===>>', res);
						if (res.code === 1) {
							that.$api.msg('修改成功');
						} else {
							that.$api.msg(res.info);
						}
					});
				}
			},
			//获取验证码
			getCode() {
				let that = this;

				if (that.mobile == '') {
					that.$api.msg('请输入手机号');
					return;
				}
				//手机号码正则验证
				if (!/^1[3-9][0-9]\d{8,11}$/.test(that.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '手机号码格式不正确'
					});
					return;
				}
				that.$http
					.get(service.api.login.code, {
						mobile: that.mobile,
						temp: "sms_reg"
					})
					.then(function(res) {
						console.log(res);
						if (res.code === 1) {
							that.countDown = !that.countDown;
							that.$api.msg('验证码发送成功');
							that.codeText = '重新获取';
							setTimeout(() => {
								that.$api.msg(res.info);
							}, 1500);
						} else {
							that.$api.msg(res.info);
						}
					});
			},
			getCodeNum() {
				let that = this;

				if (that.newPhone == '') {
					that.$api.msg('请输入手机号');
					return;
				}
				//手机号码正则验证
				if (!/^1[3-9][0-9]\d{8,11}$/.test(that.newPhone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号码格式不正确'
					});
					return;
				}
				that.$http
					.get(service.api.login.code, {
						mobile: that.newPhone,
						temp: "sms_bind"
					})
					.then(function(res) {
						console.log(res);
						if (res.code === 1) {
							that.countDown = !that.countDown;
							that.$api.msg('验证码发送成功');
							that.codeText = '重新获取';
							setTimeout(() => {
								that.$api.msg(res.info);
							}, 1500);
						} else {
							that.$api.msg(res.info);
						}
					});
			},
			countDownEnd() {
				this.countDown = !this.countDown;

			},
			//获取验证码倒计时进行中
			changes() {
				console.log('11');
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
		background-color: #fff;
	}

	.amend {
		.content {
			background-color: #ffffff;
			margin-top: 30upx;
			padding: 0 30upx;

			.box {
				padding: 40upx 0;
				border-bottom: 1upx solid #f4f4f4;
				color: #333333;
			}

			.code {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>view {
					width: 124upx;
					height: 52upx;
					line-height: 52upx;
					text-align: center;
					border-radius: 26upx;
					background-color: #f81149;
					font-size: 28upx;
					color: #ffffff;
				}
			}
		}

		.btn {
			width: 630upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			border-radius: 50upx;
			color: #ffffff;
			background-color: #f81149;
			font-size: 36upx;
			margin: 60upx auto 0 auto;
		}
	}
</style>
